<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>router study</title>

<script src="vue.js"></script>
<style type="text/css">
  
    .login{
      width: 300px;
      border:1px solid red;
    }
    h2,h1{
      text-align: center;
    }
    .login a{
        background-color: #eee;
    }

    .login-btn{
       margin-left: 50px;
       size: 25px;
    }
     .register-btn{
       margin-left: 120px;
       size: 25px;
    }
    

  .router-link-active{
      color:red;
      font-weight: 800;
      font-style: italic;
      font-size: 18px;
  }

  .v-enter,
  .v-leaver-to{
    opacity: 0;
    transform: translateX(240px);
  }

  .v-enter-active,
  .v-leave-active{
    transition: all 0.4s ease;
  }



  .myActive{
      border:1px solid red;
  }




</style>
</head>
<body>

<ol>
  <li>【注 】创建router 要在vm实例的前面</li>
  <li>高亮显示时需要在浏览器上检查元素，把当前显示的组件名的类给复制过来，然后给这个类设置样式就可以了</li>
  <li>这个显示出来的类默认名为： router-link-active</li>
</ol>





<div id="app">

  <div class="login">
    <h2>页面标题</h2>
    
<!-- a标签上路由跳转页面，常规方法 -->
  <!-- <a href="#/login" class="login-btn">登录</a> -->
  <!-- <a href="#/register" class="register-btn">注册</a> -->

<!-- router-link  默认渲染为a标签，这里可以改为其他标签，但是css不支持样式改造 -->
  <router-link to='/register'tag='span'> 注册(这里改换为span标签)</router-link>
  <router-link to='/login'> 登录按钮 </router-link>

<hr>
  
    <transition mode="out-in">
      <router-view></router-view>
    </transition>
    
  </div>


</div>


<template id="login">
<div>
    <h2>这个是登录组件的h2。或者可以写上div来存放自定义内容</h2>
    <h1>这是登录组件的内容</h1>
</div>    
</template>

<template id="register">
<div>
    <h2>这个是注册组件的h2。或者可以写上div来存放自定义内容</h2>
    <h1>这是注册组件的内容</h1>
</div>
</template>



<br>
<script src="vue-router.js"></script>
<script type="text/javascript">

var  login = {
  template: '#login'
}

var  register = {
  template: '#register'
}


var routerObj = new VueRouter({//创建一个路由规则对象

    routes: [
        //每个路由规则都是一个对象，这个规则对象的身上有两个必须的属性
        //  属性1： path，表示监听路由链接地址；
        //  属性2： component, 表示如果路由是前面匹配的path， 则表示compinent 属性对应的那个组件
        
        //进入主页 / 时默认展示login组件的内容, 但是url地址还是会始终展示 /
        //因为/ 与内容（网页的登录内容）不符合，所以可能会造成一一些影响
        // { path: '/',component: login },//屏蔽以此展示redirect
        
        { path:'/',redirect:'/login' },//登录/ 时自动重定向 url 为 login
        { path:'/login' , component: login},//如果url地址是login就展示这个组件
        { path:'/register',component: register}
    ],
   linkActiveClass: 'myActive' //将默认选中的类名重新设置

})




var vm= new Vue({
  el: '#app',

  data: {
  	 
  },
 
  methods:{
  	

  },
  components:{

  },

  //将路由规则对象注册到vm实例上，用来监听url 地址的变化，然后展示对应的组件
  router:routerObj  


})





</script>

	
</body>
</html>